<template>
  <div>
    <el-form @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="负责人查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          clearable
          placeholder="地址查询"
          auto-top
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <select-staff
          v-model="params['res_a.eq']"
          clearable
          placeholder="项目经理A角"
          @select="getData()"
        ></select-staff>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:name="scope">
        <el-popover placement="top-start" title="项目经理" trigger="hover">
          <div>
            <div>{{ `A角： ${scope.row.res_a_name || '-'}；` }}</div>
            <div class="mb-2">{{ `电话： ${scope.row.res_a_phone || '-'}` }}</div>
            <div>{{ `B角： ${scope.row.res_b_name || '-'}；` }}</div>
            <div>{{ `电话： ${scope.row.res_b_phone || '-'}` }}</div>
          </div>
          <div slot="reference">
            <div class="status-label badge-info text-left w-100">
              <div>A角:{{ scope.row.res_a_name }}</div>
              <div>B角:{{ scope.row.res_b_name }}</div>
              <div v-if="+scope.row.gua_type === 4">
                风控员:{{ scope.row.res_person_risk_point }}
              </div>
            </div>
          </div>
        </el-popover>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      append-to-body
      top="30px"
      width="1000px"
      :close-on-click-modal="false"
      :visible.sync="loanVisible"
    >
      <component-index :related-id="relatedId" :farm-id="farmId"></component-index>
    </el-dialog>

    <post-loan-file :visible.sync="visible" :related-data="relatedData"></post-loan-file>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { DATE_EXPIRE } from '@/credit/views/county/unionProvince/PostloanExpir'
import { enumGuatype } from '@/credit/plugins/enumTown'
import SelectAddress from '@/components/select/SelectAddress'
import SelectStaff from '@/components/select/SelectStaff2'
import ComponentIndex from '@/credit/views/city/self/after/ComponentIndex'
import PostLoanFile from '@/credit/components/warningTips/PostLoanFile'
export default {
  components: {
    SelectAddress,
    SelectStaff,
    ComponentIndex,
    PostLoanFile,
  },
  data() {
    return {
      params: {
        index: 1,
        size: 10,
        'load_beh_status.neq': 6,
      },
      order: { load_end_date: 'desc' },
      loading: false,
      tableColumns: [
        { attrs: { label: '项目名称', prop: 'customer_name', width: 140 } },
        { attrs: { label: '业务类型', prop: 'guaType', align: 'center' } },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '放款金额', prop: 'reply_funds', align: 'center' } },
        { attrs: { label: '在保余额', prop: 'reply_funds', align: 'center' } },
        { attrs: { label: '到期时间', prop: 'endDate', align: 'center' } },
        { attrs: { label: '项目经理', prop: 'resName', align: 'center' }, slot: 'name' },
        {
          attrs: { label: '操作', align: 'center', minWidth: 120 },
          operations: [
            {
              content: '贷后详情',
              icon: 'fa fa-edit',
              event: this.handleEdit,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.hanleView,
            },
          ],
        },
      ],
      tableData: [],
      totalCount: 0,
      tableName: 'customer_related',
      dateFmt: 'yyyy-MM-dd',
      userId: '',
      loanVisible: false,
      relatedId: '',
      farmId: '',
      relatedData: {},
      visible: false,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },

  created() {
    this.params['loan_approval_status.eq'] = 3
    this.params['orWhere.service_id.eq'] = this.clientId
    this.params['orWhere.recommend_service.eq'] = this.clientId
    this.params['load_end_date.gt'] = this.$utils.dateFormat(new Date(+new Date()), 'yyyy-MM-dd')
    this.params['load_end_date.lte'] = this.$utils.dateFormat(
      new Date(+new Date() + DATE_EXPIRE * 8.64e7),
      'yyyy-MM-dd'
    )
    this.getData()
  },

  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data?.data ?? []
          this.tableData = data.map(this.dataAdapter)
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.guaType = enumGuatype[item.gua_type] || '-'
      item.endDate = this.$utils.dateFormat(item.load_end_date, this.dateFmt)
      item.resName = `A角: ${item.res_a_name} B角: ${item.res_b_name}`
      const enumUnion = {
        0: '常规28业务',
        1: '便捷28业务',
      }
      item.guaType = +item.gua_type === 4 ? enumUnion[item.channel_type] : item.guaType

      return item
    },
    handleEdit(row) {
      this.relatedId = row.customer_related_id || ''
      this.farmId = row.customer_id || ''
      this.loanVisible = true
    },
    hanleView(row) {
      this.relatedData = { ...row }
      this.visible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
